<template>
	<view>
		<navbar title="地址信息" />
		<view class="address flex justify-content_space-between v-details-card border-box">
			<view class="title">家庭地址</view>
			<view class="info">
				<view class="area flex align-item_center justify-content_space-between" @click='changeArea'>
					<view>
						<template v-if="area.areaName">
							{{area.areaName}}
						</template>
						<template v-else>请选择省/市/区</template>
					</view>
					<image class="block" src="https://mall-admin.xinjiafu.net/mini-static/images/user/9.png" />
				</view>
				<view class="line"></view>
				<view class="input flx align-item_center justify-content_center">
					<up-textarea v-model="area.detailAddress" placeholder="请填写详细地址（精确至门牌号）" maxlength="-1"
						placeholder-style="corlo:#666666,font-size: 24rpx,font-weight: 400"></up-textarea>
				</view>
			</view>
		</view>

		<view class="item border-box v-details-card flex align-item_center">
			<view class="name">收件人</view>
			<view class="input">
				<up-input placeholder="请输入收件人" border="none" v-model="area.name"></up-input>
			</view>
		</view>
		<view class="item border-box v-details-card flex align-item_center">
			<view class="name">手机号</view>
			<view class="input">
				<up-input placeholder="请输入电话收件人手机号" border="none" v-model="area.mobile"></up-input>
			</view>
		</view>
		<view class="item border-box v-details-card flex align-item_center justify-content_space-between">
			<view class="name">是否设置默认地址</view>
			<view class="input">
				<up-switch v-model="area.defaultStatus" activeColor="#A72530" inactiveColor="#cccccc"></up-switch>
			</view>
		</view>
		<view class="saveConfirm" @click="confirmArea">保存</view>

		<su-region-picker :show="area.show" @cancel="cancel" @confirm="onRegionConfirm" />
		<!-- <up-picker :show="area.show" :columns="columns" keyName="name"></up-picker> -->
	</view>
</template>

<script setup>
	import navbar from "@/components/navbar.vue"
	import {
		reactive,
		ref
	} from "vue"
	import {
		msg
	} from "@/utils/tool.js"
	import {
		onLoad,
	} from '@dcloudio/uni-app';
	import addressApi from "@/api/member/address.js"

	const confirmArea = () => {
		if (!area.areaName) return msg("省市区不能为空")
		if (!area.detailAddress.trim()) return msg("详细地址不能为空")
		if (!area.name.trim()) return msg("收件人不能为空")
		if (!area.mobile.trim()) return msg("手机号不能为空")

		const data = {
			name: area.name,
			mobile: area.mobile,
			detailAddress: area.detailAddress,
			areaId: area.data.district_id,
			areaName: area.areaName,
			defaultStatus: area.defaultStatus
		}
		if (addressId.value) {
			addressApi.update({
				...data,
				id: addressId.value
			}).then(() => {
				uni.navigateBack()
			})
		} else {
			addressApi.create(data).then(res => {
				uni.navigateBack()
			})
		}
	}


	const cancel = () => {
		area.show = false;
	}

	const changeArea = () => {
		area.show = true;
	}

	const area = reactive({
		data: {},
		name: "",
		mobile: "",
		areaName: "",
		detailAddress: "",
		defaultStatus: false,
		show: false,
		columns: []
	})

	const onRegionConfirm = (val) => {
		area.data = val;
		area.areaName = `${area.data.province_name} ${area.data.city_name} ${area.data.district_name}`
		cancel()
	}

	const addressId = ref();
	const addressGet = () => {
		addressApi.get(addressId.value).then(res => {
			area.name = res.data.name;
			area.mobile = res.data.mobile;
			area.detailAddress = res.data.detailAddress;
			area.defaultStatus = res.data.defaultStatus;
			area.areaName = res.data.areaName;
			area.data["district_id"] = res.data.areaId
		})
	}

	onLoad((option) => {
		if (option.id) {
			addressId.value = option.id;
			addressGet()
		}
	})
</script>

<style>
	page {
		background: #F8F3E7;
	}
</style>
<style scoped lang="scss">
	.saveConfirm {
		width: 710rpx;
		height: 92rpx;
		line-height: 92rpx;
		text-align: center;
		border-radius: 100rpx;
		background: rgba(167, 37, 48, 1);
		margin: 120rpx auto;

		font-size: 32rpx;
		font-weight: 400;
		color: rgba(245, 245, 245, 1);
	}

	.item {
		padding: 28rpx 36rpx;
		margin: 20rpx auto 0;

		.input {
			:deep(.input-placeholder) {

				font-size: 28rpx !important;
				font-weight: 400 !important;
				color: rgba(102, 102, 102, 1) !important;
			}

			:deep(.u-input__content__field-wrapper) {

				input {
					font-size: 28rpx !important;
					font-weight: 400 !important;
					color: rgba(102, 102, 102, 1) !important;
				}
			}
		}

		.name {
			font-size: 28rpx;
			font-weight: 400;
			color: rgba(64, 3, 3, 1);
			margin-right: 104rpx;
		}
	}

	.address {
		margin: 20rpx auto 0;
		padding: 26rpx 20rpx 26rpx 36rpx;

		.info {
			width: 436rpx;

			.input {
				margin-top: 20rpx;

				:deep(.u-textarea) {
					padding: 0 !important;
					background: transparent !important;
					border: none !important;

					textarea {
						corlo: #666666 !important;
						font-size: 28rpx !important;
						font-weight: 400 !important;
					}
				}
			}

			.line {
				width: 100%;
				border-top: 1rpx solid rgba(204, 204, 204, 1);
				margin-top: 20rpx;
			}

			.area {
				view {
					font-size: 28rpx;
					font-weight: 400;
					color: rgba(102, 102, 102, 1);
				}

				image {
					width: 24rpx;
					height: 12rpx;
				}
			}
		}

		.title {
			font-size: 28rpx;
			font-weight: 400;
			letter-spacing: 0rpx;
			line-height: 40.54rpx;
			color: rgba(64, 3, 3, 1);
		}
	}
</style>